<template>
  <a-layout style="height: 100vh; text-align: center;">
    <a-layout-header>
      <a-row>
        <a-col :xl="{offset: 8, span: 8}" style="padding-top: 14px" :xs="{offset: 0, span: 24}">
          <a-input-search v-model="searchText" placeholder="input search text" enter-button :disabled="isSearching" @search="handleSearch"/>
        </a-col>
      </a-row>
    </a-layout-header>
    <a-layout-content>
      <a-row>
        <a-col :offset="4" :span="16">
          <a-spin v-show="isSearching" style="margin-top: 100px;" tip="搜索中..."/>
          <a-list v-show="!isSearching" :grid="{ gutter: 16, column: 4 }"
                  :header="isSearched ? `${comments.length} 条句子, 1分钟内还可以搜索 ${remainTimes} 次` : '点击即可进行搜索'"
                  :data-source="comments">
            <a-list-item slot="renderItem" slot-scope="item, index">
              <a-card :title="item.nickname">
                <div style="min-height: 3.6em;
                            line-height: 1.2;
                            max-height: 2.4em;
                            display: -webkit-box;
                            -webkit-line-clamp: 3;
                            -webkit-box-orient:vertical;
                            overflow:hidden;"
                >
                  {{item.content}}
                </div>
              </a-card>
            </a-list-item>
          </a-list>
        </a-col>
      </a-row>
    </a-layout-content>
  </a-layout>
</template>

<script>
import CONSTANT from '@/utils/constant'

export default {
  name: "index",
  data: _ => ({
    isSearched: false,
    searchText: '',
    isSearching: false,
    comments: [],
    remainTimes: null,
  }),
  methods: {
    async handleSearch () {
      try {
        this.isSearched = true
        this.isSearching = true
        let {data} = await this.$http.post('/search', {
          text: this.searchText
        })
        this.comments = data.data.comments
        this.remainTimes = data.data.remainTimes
        this.isSearching = false
      } catch ({data}) {
        this.isSearching = false
        this.remainTimes = 0
        switch (data.code) {
          case CONSTANT.RESP.NOT_LOGIN:
            this.$message.error(data.msg)
            this.$router.push('/login').then(r => {})
            break
          default:
            this.$message.error(data.msg)
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
</style>